<!-- 用户模块--申请医生界面 -->
<template>
  <div class="MyContainer">
    <div class="doctor-info">医生信息</div>
      <!-- <el-divider border-style="dashed" /> -->
      <!-- 申请医生界面 -->
      <el-table :data="tableData" border  header-cell-class-name="table-header" style="width: 100%;margin-top:10px">
        <el-table-column prop="docId" label="编号" width="100"></el-table-column>
          <el-table-column prop="docName" label="医生姓名" width="150"></el-table-column>
          <el-table-column prop="docHospital" label="所属医院" width="200"></el-table-column>
          <el-table-column prop="docSecdepartment" label="医生科室" width="200"></el-table-column>
          <el-table-column prop="docSpeciality" label="专业特长" width="200"></el-table-column>
          <el-table-column prop="value_info" label="医生详细信息" width="200"> 
            <template #default="scope">
                  <el-button type="primary" @click="checkInfo(scope.row.docId)">查看详情</el-button>
              </template>
              <!-- <router-link :to="{path:'/UserSignDoc'}">点击查看详情</router-link> -->
          </el-table-column> 
          <el-table-column prop="value_apply" label="申请成为我的医生" width="200">
              <template #default>
                  <el-button link type="primary"  @click="Click">点击申请</el-button>
              </template>
          </el-table-column>   
          <el-table-column prop="isMyDoc" label="是否已签约" :filters="[{ text: '已签约', value: '已签约' },
                                                                          { text: '未签约', value: '未签约' },]"
                          :filter-method="filterTag" filter-placement="bottom-end" >
              <template #default="scope">
              <el-tag :type="scope.row.isMyDoc === '已签约' ? '' : 'success'" disable-transitions>{{ scope.row.isMyDoc }}</el-tag>
              </template>
          </el-table-column>
      </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref ,reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAlldoctorInfo } from '../../api/manager';
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()

interface TableItem {
docId: string;
  docName: string;
  docHospital: string;
  docSecdepartment: string;
  docSpeciality: string;
  isMyDoc: string;
}

const tableData = ref<TableItem[]>([]);

const id = ref([])
const getData = () => {
getAlldoctorInfo().then(res=>{
  console.log("所有医生信息",res)
  if(res.code == 200){
    for(var i=0;i<res.data.length;i++){
      var doc=res.data[i]
      if(doc.isMyDoc==1){
        tableData.value.push({
        docId:doc.docId,
        docName:doc.docName,
        docHospital:doc.docHospital,
        docSecdepartment:doc.docSecdepartment,
        docSpeciality:doc.docSpeciality,
        isMyDoc:'已签约'})
      }else{tableData.value.push({
        docId:doc.docId,
        docName:doc.docName,
        docHospital:doc.docHospital,
        docSecdepartment:doc.docSecdepartment,
        docSpeciality:doc.docSpeciality,
        isMyDoc:'未签约'})}     
     }}
  }).catch(err=>{console.log("请求失败")})
};
getData();

const filterTag = (value: string, row: TableItem) => {
return row.isMyDoc === value
}
//filterTag()

const Click = () => {
  ElMessageBox.confirm(
    '是否申请该医生为您的签约医生',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    ElMessage({
      type: 'success',
      message: '操作成功，正在等待医生同意申请',
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '取消操作',
    })
  })
}

function checkInfo(id){
  console.log(id)
  router.push({
      path:'/UserSignDoc',
      query:{
          id:id
      }
  })
}
</script>

<style scoped>
.doctor-info {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}

</style>
